<template>
    <div class="sidebar">
        <el-menu  default-active id="menu" theme="dark" unique-opened router>
         <div v-for="menu in menus" :key=menu.menuId>
             <el-menu-item :index="menu.menuUrl"  v-if="!menu.hasMenu">
             {{menu.menuName}}
            </el-menu-item>
             <el-submenu  v-if="menu.hasMenu" :index="menu.menuId+''">
                <template slot="title">{{menu.menuName}}</template>
                <el-menu-item v-for="submenu in menu.subMenu" :index="submenu.menuUrl">{{submenu.menuName}}</el-menu-item>
            </el-submenu>
         </div>
                       
        </el-menu>
    </div>
</template>

<script>
    export default {
        data:function(){
            return {
                menus:[]
            }
        },
        methods:{
             loadMenus(){
                const self = this;
                 let menu = document.querySelector("#menu");
                self.$req.get(self.$api("Menus"),self,function(res){
                      self.menus = res.data.data;
                    },null,false,menu)}
        
        },
        computed:{
           
        },
        mounted:function(){
              this.loadMenus();
       
        }
    }
</script>

<style scoped>
    .sidebar{
        display: block;
        position: absolute;
        width: 250px;
        left: 0;
        top: 70px;
        bottom:0;
        background: #2E363F;
    }
    .sidebar > ul {
        height:100%;
    }
</style>
;